<script setup lang="ts">
import { ref } from 'vue'
import NavBottom from '../../components/nav.vue'

const data = ref([
   { 
       name:'不动产查询',
       subname: '查询个人不动产/房产',
       key: 'IMMOVABLES',
       path: '/home_search'
   },
   { 
       name:'司法数据查询',
       subname: '个人司法大数据/风险/失信',
       key: 'JUDICIALDATA',
       path: '/home_search'
   },
   { 
       name:'社保查询',
       subname: '查询个人社保参保证明',
       key: 'SOCIALSECURITY',
       path: '/home_search'
   }
])
const muldata = ref([
   { 
       name:'不动产+司法数据+社保',
       subname: '三项组合一键查询',
       key: 'IMMOVABLES_JUDICIALDATA_SOCIALSECURITY',
       path: '/home_search'
   },
   { 
       name:'不动产+司法数据',
       subname: '两项组合一键查询',
       key: 'IMMOVABLES_JUDICIALDATA',
       path: '/home_search'
   },
   { 
       name:'司法数据+社保',
       subname: '两项组合一键查询',
       key: 'JUDICIALDATA_SOCIALSECURITY',
       path: '/home_search'
   }
])


</script>

<template>

  <div class="my">
    <div class="my-top">
        <img src="../../assets/logo.png" alt="">
        <div class="my-top-right">
            <div class="my-item">用户昵称</div>
        </div>
    </div>
    <div class="my-search">
        <div>单项业务查询</div>
        <div class="seachContent" v-for="item in data" :key="item.key">
            <div>
                <div>{{item.name}}</div>
                <span class="gray">{{item.subname}}</span>
            </div>
            <el-button type="primary" round @click="$router.push({ path: item.path, query: { key: item.key } })">立即查询</el-button>
        </div>
    </div>
    <div class="my-search">
        <div class="title">多项业务查询</div>
        <div class="seachContent1">
            <div v-for="item in muldata" :key="item.key"  class="seachCont">
                <div>{{item.name}}</div>
                <div class="gray mb16">{{item.subname}}</div>
                <el-button type="primary" round @click="$router.push({ path: item.path, query: { key: item.key } })">立即查询</el-button>
            </div>
        </div>
    </div>
    <NavBottom></NavBottom>
  </div>
</template>

<style scoped>
.my{
    background-color: #f6f6f6;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    padding-bottom: 20%;
    overflow-y: scroll;
}
.my-top{
    height: 120px;
    display: flex;
    background: #346EFE;
    color: #fff;
    align-items: center;
}
.my-top img {
    width: 50px;
    height: 50px;
    display: inline-block;
    padding-top: 20px;
    padding-left: 16px;
}
.title{
    margin-bottom: 10px;
}
.my-item{
    padding-top: 20px;
    padding-left: 16px;
}
.my-item1{
    padding-left: 14px;
    font-size: 14px;
    color: #999;
}
.my-search{
    margin: 0 16px;
    margin-top: 16px;
    background: #fff;
    border-radius: 10px;
    padding: 16px 12px;
}
.seachContent{
    padding: 12px 16px;
    background: #F3F8FF;
    margin-top: 16px;
    display: flex;
    justify-content: space-between;
    border-radius: 10px;
    align-items: center;
    font-weight: 600;
    color: #000000;
}
.gray{
    color: #999999;
    font-size: 12px;
    font-weight: 400;
}
.seachContent .el-button, .seachContent1 .el-button{
     color: #2863fd;
     background: #DFE9FF;
     border: none;
      font-weight: 600;
}
.seachContent1{
    display: flex;
        overflow-x: scroll;
}
.seachCont{
    background: #F3F8FF;
    border-radius: 5px;
    padding: 14px 12px;
    margin-right: 12px;
    white-space: nowrap;
}
.mb16{
    margin-bottom: 16px;
    margin-top: 10px
}
/* 隐藏滚动条的样式 */
::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera*/
}
</style>
